<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color:#e4f30d62;
            padding:0;
            margin:0;
            overflow:hidden;
        }
        #overlay {
            position: fixed;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            top: 0;
            z-index: 999;
        }
        #overlay > div {
            height: 128px;
            width: 128px;
            border: 1px solid white;
        }
    </style>
    <script src="../src/three.js"></script>
    <script src="../src/OrbitControls.js"></script>
</head>
<body>
    <div id="overlay">
        <div>
        </div>
    </div>
</body>
<script>
    var camera, scene, renderer;    // 透视相机、透视场景
    var mesh, sprite, texture;
    var cameraOrtho, sceneOrtho;    // 正交相机、正交相机的场景
    var dpr = window.devicePixelRatio;
    var textureSize = 128 * dpr;
    var vector = new THREE.Vector2();
    init()
    animate()

    // -- Functions --
    function init(){
       	//
        var width = window.innerWidth;
        var height = window.innerHeight;
        camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
        camera.position.z = 20;
        cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
        cameraOrtho.position.z = 10;
        scene = new THREE.Scene();
        scene.background = new THREE.Color( 0x20252f );
        sceneOrtho = new THREE.Scene();
        // console.log(sceneOrtho.background)
        // sceneOrtho.background = new THREE.Color(0xe4f30d)
        //
        var geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
        var material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );
        //
        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
        scene.add( ambientLight );
        var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
        camera.add( pointLight );
        scene.add( camera );
        //
        var data = new Uint8Array( textureSize * textureSize * 3 );
        texture = new THREE.DataTexture( data, textureSize, textureSize, THREE.RGBFormat );
        texture.minFilter = THREE.NearestFilter;
        texture.magFilter = THREE.NearestFilter;
        texture.needsUpdate = true;
        //
        var spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
        sprite = new THREE.Sprite( spriteMaterial );
        sprite.scale.set( textureSize, textureSize, 1 );
        sceneOrtho.add( sprite );
        updateSpritePosition();
        //
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.autoClear = false;
        document.body.appendChild( renderer.domElement );
        //
        var overlay = document.getElementById( 'overlay' );
        var controls = new THREE.OrbitControls( camera, overlay );
        controls.enablePan = false;
        //
        window.addEventListener( 'resize', onWindowResize, false );
    }
	function onWindowResize() {
        var width = window.innerWidth;
        var height = window.innerHeight;
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        cameraOrtho.left = - width / 2;
        cameraOrtho.right = width / 2;
        cameraOrtho.top = height / 2;
        cameraOrtho.bottom = - height / 2;
        cameraOrtho.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
        updateSpritePosition();
    }
    function updateSpritePosition() {
        var halfWidth = window.innerWidth / 2;
        var halfHeight = window.innerHeight / 2;
        var halfImageWidth = textureSize / 2;
        var halfImageHeight = textureSize / 2;
        sprite.position.set( - halfWidth + halfImageWidth, halfHeight - halfImageHeight, 1 );
    }
    function animate() {
        requestAnimationFrame( animate );
        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
        renderer.clear();
        renderer.render( scene, camera );
        // console.log(renderer.getSize())
        // calculate start position for copying data
        vector.x = ( window.innerWidth * dpr / 2 ) - ( textureSize / 2 );
        vector.y = ( window.innerHeight * dpr / 2 ) - ( textureSize / 2 );
        // console.log(renderer)
        renderer.copyFramebufferToTexture( vector, texture );
        // renderer.clear();
        // console.log(renderer.getSize())
        renderer.clearDepth();
        renderer.render( sceneOrtho, cameraOrtho );
        // console.log(renderer)
        // renderer.render( scene, camera );
    }


</script>
</html>